<template>
  <el-dialog title="绑定定位器" :visible.sync="dialogVisible" width="600px" append-to-body>
    <el-form :model="bindForm" :rules="bindRules" ref="bindForm" label-width="100px">
      <el-form-item label="器具信息">
        <el-input
          :value="containerDisplayText"
          disabled
          placeholder="未选择器具"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="搜索定位器">
        <el-input
          :value="locatorSearchText"
          @input="handleSearchInput"
          placeholder="请输入定位器编码或设备型号进行搜索"
          prefix-icon="el-icon-search"
          clearable
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="选择定位器" prop="locatorIds">
        <el-select
          v-model="bindForm.locatorIds"
          placeholder="请选择定位器（可多选）"
          multiple
          filterable
          :filter-method="handleFilter"
          style="width: 100%"
          :loading="locatorLoading"
        >
          <el-option
            v-for="locator in filteredLocatorList"
            :key="locator.locatorId"
            :label="`${locator.locatorCode} - ${locator.deviceModel}`"
            :value="locator.locatorId"
            :disabled="locator.containerId != null"
          >
            <span style="float: left">{{ locator.locatorCode }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">
              {{ locator.deviceModel }}
              <el-tag v-if="locator.containerId != null" type="warning" size="mini" style="margin-left: 5px">已绑定</el-tag>
            </span>
          </el-option>
        </el-select>
        <div style="margin-top: 5px; color: #909399; font-size: 12px;">
          已选择 {{ bindForm.locatorIds ? bindForm.locatorIds.length : 0 }} 个定位器
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BindLocatorDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    bindForm: {
      type: Object,
      required: true
    },
    bindRules: {
      type: Object,
      required: true
    },
    containerDisplayText: {
      type: String,
      default: ''
    },
    locatorSearchText: {
      type: String,
      default: ''
    },
    filteredLocatorList: {
      type: Array,
      default: () => []
    },
    locatorLoading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleSearchInput(value) {
      this.$emit('update:locatorSearchText', value)
      this.$emit('search')
    },
    handleFilter(query) {
      this.$emit('filter', query)
    },
    handleSubmit() {
      // 先进行表单验证
      this.$refs.bindForm.validate(valid => {
        if (valid) {
          // 验证通过，触发提交事件
          this.$emit('submit')
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    }
  }
}
</script>
